<template>
  <div class="evaluate-wrap">
    <div class="evaluate-pic"></div>
    <div class="line-box"></div>

    <div class="problem-box">
      <div class="topic-con">1.在本次入职过程中，请您对驻厂老师的服务态度进行评价：</div>
      <div class="name-box">
        <img src="./admin.png" class="pic1" onclick="return false"/>
        <span class="name" :class="{'no-rate':showTeacherEvaluate == 1}">驻厂姓名：</span>
        <span class="number">{{teacherName}}</span>
        <div class="mui-radio grade-box" v-if="showTeacherEvaluate == 2">
          <input type="radio" name="radio1" checked="checked"><span class="active">{{teacherEvaluate}}</span>
        </div>
        <span class="admin no-rate" v-if="showTeacherEvaluate == 1">未评价</span>
      </div>

      <div class="reason-box" v-if="teacherEvaluate == '不满意'"><span class="reason">不满意原因：</span>{{teacherReason}}</div>
    </div>

    <div class="problem-box">
      <div class="topic-con">2.在使用蓝聘过程中，请您对蓝聘客服的服务态度进行评价：</div>
      <div class="name-box">
        <img src="./service.png" class="pic1" onclick="return false"/>
        <span class="name" :class="{'no-rate':showServerEvaluate == 1}">客服工号：</span>
        <span class="number">{{serverName}}</span>
        <div class="mui-radio grade-box" v-if="showServerEvaluate == 2">
          <input type="radio" name="radio2" checked="checked"><span class="active">{{serverEvaluate}}</span>
        </div>
        <span class="admin no-rate" v-if="showServerEvaluate == 1">未评价</span>
      </div>

      <div class="reason-box" v-if="serverEvaluate == '不满意'"><span class="reason">不满意原因：</span>{{serverReason}}</div>

    </div>


    <div class="problem-box">
      <div class="topic-con topic">3.入职工作后，您还有什么困难需要蓝聘平台帮您解决么？</div>
      <div class="reason-box" v-if="showPursueEvaluate == 2">{{pursueReason}}</div>
      <div class="reason-box" v-if="showPursueEvaluate == 1">未填写</div>
    </div>

    <div class="problem-box">
      <div class="topic-con topic">4.您对蓝聘还有什么其他意见或建议么？</div>
      <div class="reason-box" v-if="showOtherEvaluate == 2">{{otherReason}}</div>
      <div class="reason-box" v-if="showOtherEvaluate == 1">未填写</div>
    </div>

    <div class="problem-box" v-for="(item,index) in chaseReasonList" :key="index">
      <div class="topic-con topic">追加评价{{index+1}}：</div>
      <div class="reason-box">{{item}}</div>
    </div>

    <div class="btn-box">
      <button type="button" class="btn cancel" @click="openModal">删除评价</button>
      <button type="button" class="btn confirm" @click="chaseEvaluate">追加评价</button>
    </div>

    <v-dialog v-model="sendVal" :content="content" cancelText="取消" confirmText="确定" @confirm="deleteEvaluate"
              @cancel="closeModal"></v-dialog>

  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import dialog from '../../components/dialog/dialog'
  import {getUrlKey, getDevice} from "../../common/js/util"

  export default {
    data() {
      return {
        content: "确定删除全部及追加评价？",
        sendVal: false,
        evaluateId: "",
        teacherName: "",
        teacherEvaluate: "",
        teacherReason: "",
        serverName: "",
        serverEvaluate: "",
        serverReason: "",
        showTeacherEvaluate: 0,
        showServerEvaluate: 0,
        showPursueEvaluate: 0,
        showOtherEvaluate: 0,
        pursueReason: "",
        otherReason: "",
        chaseReasonList: [],
        id: getUrlKey("id"),
        deviceType: ""
      }
    },
    mounted() {
      this.evaluateId = this.$route.query.evaluateId;
      this.deviceType = this.$route.query.deviceType;

      if (this.id) {
        this.userSign = this.id;
      } else {
        let base64 = require('js-base64').Base64;
        this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      }
      this.queryMineEvaluateList();
    },
    methods: {
      queryMineEvaluateList() {
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/work/get_work_order_remark_list?sgin=" + this.userSign + "&type=2" + "&workOrderId=" + this.evaluateId).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data.workRemarkList != null && resultObj.data.workRemarkList.length > 0) {
              for (let i = 0, length = resultObj.data.workRemarkList.length; i < length; i++) {

                if (resultObj.data.workRemarkList[i].problemName.indexOf("驻厂老师") != -1) {//问题1
                  this.teacherName = resultObj.data.workRemarkList[i].teacherName;
                  this.teacherEvaluate = resultObj.data.workRemarkList[i].problemAnswer;
                  this.teacherReason = resultObj.data.workRemarkList[i].remark;
                  this.showTeacherEvaluate = this.teacherEvaluate ? 2 : 1;
                }

                if (resultObj.data.workRemarkList[i].problemName.indexOf("蓝聘客服") != -1) {//问题2
                  this.serverName = resultObj.data.workRemarkList[i].teacherName;
                  this.serverEvaluate = resultObj.data.workRemarkList[i].problemAnswer;
                  this.serverReason = resultObj.data.workRemarkList[i].remark;
                  this.showServerEvaluate = this.serverEvaluate ? 2 : 1;
                }

                if (resultObj.data.workRemarkList[i].problemName.indexOf("蓝聘平台") != -1) {//问题3
                  this.pursueReason = resultObj.data.workRemarkList[i].problemAnswer;
                  this.showPursueEvaluate = this.pursueReason ? 2 : 1;
                }

                if (resultObj.data.workRemarkList[i].problemName.indexOf("其他意见或建议") != -1) {//问题4
                  this.otherReason = resultObj.data.workRemarkList[i].problemAnswer;
                  this.showOtherEvaluate = this.otherReason ? 2 : 1;
                }

                if (resultObj.data.workRemarkList[i].problemName.indexOf("追加评价") != -1) {//追加
                  this.chaseReasonList.push(resultObj.data.workRemarkList[i].problemAnswer);
                }

              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openModal() {//刪除
        this.sendVal = true;
      },
      closeModal() {
        this.sendVal = false;
      },
      callStack(type) {
        if (getDevice() == "ios") {
          window.webkit.messageHandlers.submitSuccess.postMessage({
            "body": type
          });
        } else if (getDevice() == "android") {
          window.android.submitSuccess(type); //调用安卓
        }
      },
      chaseEvaluate() {
        if (this.deviceType != 1) {
          this.callStack(5);
        }
        this.$router.push({
          path: "/chaseevaluate",
          query: {"evaluateId": this.evaluateId, "id": this.userSign, "deviceType": this.deviceType}
        });
      },
      deleteEvaluate() {//确定
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.post(baseUrl + "/work/update_work_remark?sgin=" + this.userSign + "&workOrderId=" + this.evaluateId).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 1) {
              if (this.deviceType != 1) {
                this.callStack(4);
              }
              this.$router.push({
                path: "/delevaluate",
                query: {"deviceType": this.deviceType}
              });
            } else {
              this.$vux.toast.text("删除入职评价失败，请重试", "middle");
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"
  @import "../../../static/css/mui.min.css"

  .evaluate-wrap
    wh(100%, auto)
    .evaluate-pic
      wh(100%, 3.2rem)
      bg-image("./bg.png", 100%, 100%)
    .line-box
      wh(100%, 0.267rem)
      background: rgba(242, 242, 242, 1)
    .problem-box
      wh(100%, auto)
      .topic-con
        display: flex
        align-items: center
        margin-left: 3.2%
        wh(96.8%, 1.707rem)
        background: rgba(255, 255, 255, 1)
        size-color(0.427rem, rgba(51, 51, 51, 1))
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
        line-height: 0.533rem
      .topic
        border-bottom: none
      .name-box
        display: flex
        align-items: center
        wh(100%, 1.28rem)
        .pic1
          margin-left 3.2%
          margin-right 0.213rem
          wh(0.48rem, 0.48rem)
        .name
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .admin
          flex: 1
          text-align: right
          padding-right: 0.2rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .number
          flex: 1
          padding-right: 0.2rem
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .grade-box
          display: flex
          align-items: center
          margin-right: 0.32rem
          span
            size-color(0.427rem, rgba(51, 51, 51, 1))
            margin-left: 0.15rem
          .active
            color #3cafff
        .no-rate
          color: #CCCCCC
        .pic2
          margin-right: 0.32rem
          wh(0.32rem, 0.32rem)

      .reason-box
        margin: 0.133rem auto 0.267rem
        wh(9.36rem, auto)
        size-color(0.373rem, rgba(153, 153, 153, 1))
        .reason
          color: #333333
    .btn-box
      fj(center, center)
      wh(100%, auto)
      margin-top: 0.8rem
      padding-bottom: 0.4rem
      .save
        wh(92.53%, 1.28rem)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        border-radius: 0.16rem
        background: rgba(60, 175, 255, 1)
      .btn
        wh(4.267rem, 1.28rem)
        size-color(0.453rem, rgba(255, 255, 255, 1))
        border-radius: 0.16rem
      .cancel
        margin-right: 0.227rem
        background: rgba(255, 83, 83, 1)
      .confirm
        margin-left: 0.227rem
        background: rgba(60, 175, 255, 1)
</style>

